<template>
  <view>
    <view class="top" :class="[index==0?'cui':index==1?'cui1':'cui2']">
      <input type="text" class="input" placeholder="搜索你想要的内容" placeholder-style="padding-left:30%">
      <swiper class="swiper" :current="index" indicator-dots='true' indicator-active-color='white' autoplay
        interval='2000' @change='bian' circular='true'>
        <swiper-item v-for="(item) in list" class="swiperItem">
          <image :src="item.imageUrl" mode='widthFix'></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="center">
      <view class="centertop">
        <view v-for="item in center">{{item.name}}</view>
      </view>
    </view>
    <view class="bottom">
      <view class="bottomtop">
        <view class="bottomtopleft">热门推荐</view>
        <view class="bottomtopright">全部></view>
      </view>
      <view class="bottombtm">
        <swiper>
          <swiper-item>
            <view class="swiper-item" v-for='item in bottombtm'>
              <view class="swiper-item-left">
                <image :src="item.mainImage"></image>
              </view>
              <view class="swiper-item-right">
                <view class="swiper-item-right-top">{{item.title}}</view>
                <view class="swiper-item-right-center">{{item.nickName}}</view>
                <view class="swiper-item-right-bottom">
                  <view class="swiper-item-right-bottom-left">{{item.priceOriginal}}</view>
                  <view class="swiper-item-right-bottom-right">{{item.commTotal}}人在学</view>
                </view>
              </view>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item" v-for='item in bottombtm1'>
              <view class="swiper-item-left">
                <image :src="item.mainImage"></image>
              </view>
              <view class="swiper-item-right">
                <view class="swiper-item-right-top">{{item.title}}</view>
                <view class="swiper-item-right-center">{{item.nickName}}</view>
                <view class="swiper-item-right-bottom">
                  <view class="swiper-item-right-bottom-left">{{item.priceOriginal}}</view>
                  <view class="swiper-item-right-bottom-right">{{item.commTotal}}人在学</view>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    http
  } from '../../http.js'
  export default {
    data() {
      return {
        list: [],
        index: 0,
        center: [],
        bottombtm: [],
        bottombtm1: []
      }
    },
    onLoad() {
      this.getlist(),
        this.getlist1(),
        this.getlist2()
    },
    methods: {
      async getlist2() {
        let cui = await http({
          url: 'course/api/course/search',
          method: 'POST',
          data: {
            current: 1,
            size: 10,
            sort: "hot"
          }
        }).catch(err => err)
        this.bottombtm = cui.data.data.records.slice(0, 5)
        this.bottombtm1 = cui.data.data.records.slice(5, 10)
        console.log(this.bottombtm)
        console.log(this.bottombtm1)
      },
      async getlist1() {
        let cui = await http({
          url: 'article/api/category/label/list',
          method: 'GET'
        }).catch(err => err)
        let center = cui.data.data.pop()
        this.center = cui.data.data
      },
      async getlist() {
        let cui = await http({
          url: 'article/api/advert/show/1',
          method: 'GET'
        })
        this.list = cui.data.data
        // console.log(this.list)
      },
      bian(e) {
        this.index = e.detail.current
      }
    }
  }
</script>

<style lang="less">
  .bottom {
    width: 750rpx;
    height: 870rpx;

    .bottomtop {
      display: flex;
      justify-content: space-between;

      .bottomtopleft {
        font-size: 40rpx;
        font-weight: 500;
      }

      .bottomtopright {
        color: #c1a9a5;
      }
    }

    .bottombtm {
      width: 100%;
      height: 800rpx;
      padding: 0rpx 20rpx;
      box-sizing: border-box;

      swiper {
        height: 100%;

        swiper-item {
          height: 100%;

          .swiper-item {
            width: 100%;
            height: 150rpx;
            display: flex;
            // justify-content: space-between;

            .swiper-item-left {
              width: 35%;
              height: 100%;
              border-bottom: 1rpx solid #ccc;
              margin: 10rpx 0rpx;
              padding: 10rpx 0rpx;
              box-sizing: border-box;

              image {
                height: 100%;
                width: 100%;
                border-radius: 20rpx;
              }
            }

            .swiper-item-right {
              flex: 1;
              padding-top: 10rpx;
              padding-left: 20rpx;
              box-sizing: border-box;

              .swiper-item-right-top {
                font-weight: 600;
                font-size: 28rpx;
              }

              .swiper-item-right-center {
                color: #999999;
                font-size: 24rpx;
              }

              .swiper-item-right-bottom {
                display: flex;

                .swiper-item-right-bottom-left {
                  color: #fc9f7b;
                  font-size: 28rpx;
                }

                .swiper-item-right-bottom-right {
                  font-size: 26rpx;
                }
              }
            }
          }
        }

      }

    }
  }

  .center {
    width: 750rpx;
    height: 200rpx;
    padding-left: 80rpx;
    box-sizing: border-box;

    .centertop {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      width: 80%;
      height: 100%;
      align-items: center;

      view {
        width: 22%;
        font-size: 25rpx;
        height: 30%;
        background-color: #f8f9fb;
        text-align: center;
        line-height: 55rpx;
        border-radius: 20rpx;
        margin-left: 5rpx;
      }
    }
  }

  .cui {
    background-image: linear-gradient(rgba(29, 114, 10), rgba(124, 209, 17));
  }

  .cui1 {
    background-image: linear-gradient(rgba(187, 81, 83), rgba(63, 53, 124));
  }

  .cui2 {
    background-image: linear-gradient(rgba(16, 107, 180), rgba(16, 153, 172));
  }

  .top {
    width: 100%;
    height: 380rpx;

    .input {
      width: 90%;
      margin: auto;
      background-color: #ccc;
      height: 80rpx;
      border-radius: 80rpx;
    }

    .swiper {
      width: 86%;
      margin: auto;

      .swiperItem {
        width: 100%;
        height: 160rpx;
        display: flex;

        .image {
          width: 100%;
          height: 160rpx;
        }
      }
    }
  }
</style>
